<template>
  <div class="pad_10">
    <el-form ref="queryRef" :inline="true" label-width="68px">
        <el-form-item>
          <el-button @click="Cancel">取消</el-button>
          <el-button :disabled="!route.query.id" @click="cliCAuditFun"
          >同意</el-button
        >
        <el-button :disabled="!route.query.id" @click="cliRefuseFun"
          >驳回</el-button
        >
        <!-- <el-button :disabled="!route.query.id" @click="commitFun"
          >同意驳回</el-button
        > -->
        <el-button :disabled="!route.query.id" @click="nopassFun"
          >未通过</el-button
        >
        <el-button @click="quertionFun"
          >查看问卷</el-button
        >
        </el-form-item>
    </el-form>
    <el-divider />
    <SetUserSelect
      ref="setUserSelect"
      class="queryForm"
      :labelwidth="100"
      :isShowUserBtn="false"
      :buttonIsShow="false"
      :formData="bill"
      :queryParams="datas"
      @selChangeFun="changeFun"
    ></SetUserSelect>
    <!-- <div class="sty_top">
      <span>学习资料：</span><span class="bg_g">文章</span><span>{{ datas.resourceId }}</span>
    </div> -->
    <div class="form_box_flex">
      <el-form :model="datas" label-width="75px">
      <el-row :gutter="20" align="stretch">
        <el-col :span="24">
          <el-card class="box-card" shadow="never">
            <el-row gutter="20">
              <el-col :span="12">
                <el-form-item label="签到打卡:"  v-if="datas.researchObject != 1">
                  <div class="img_flex">
                    <el-input disabled placeholder="请输入打卡地址" v-model="datas.recordAddress" style="width: 300px" />
                    <div v-if="datas.photoList && datas.photoList.filter(item => item.type == 0).length">
                        <el-image
                        style="width: 200px; height: 150px;margin-top: 20px;"
                        :src="urls"
                        :preview-src-list="srcLists"
                        :initial-index="1"
                        fit="cover"
                      />
                        <!-- <img :src="datas.photoList && datas.photoList.filter(item => item.type == 0)[0]?.url" alt="" /> -->
                      </div>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            
            <el-row :gutter="20" align="stretch">
              <el-col :span="24">
                <el-form-item label="驳回理由:">
                    <el-input
                      v-model="datas.refuseReason"
                      disabled
                      maxlength="500"
                      placeholder="请输入驳回理由"
                      show-word-limit
                      type="textarea"
                    />
                </el-form-item>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </el-form>
    </div>
   <cliRefuseDom ref="cliRefuseRef" :id="route.query.id" url="/task/research/refuse" @updateData="updateData"></cliRefuseDom>
   <publicScore
      ref="publicScoreRef"
      :id="route.query.id"
      url=""
      @updateData="updateData"
    ></publicScore>
    <el-dialog v-model="dialogFormVisible" :title="titleName">
      <div class="card_box">
      <el-card style="margin-bottom: 20px;" shadow="never" v-for="(item, index) in topicList" :key="index">
        <template #header>
          <div class="card-header">
            <span>{{ index+1 + '、' }}{{ item.topic }} </span>
            <!-- <span v-show="istrueFun(item.answerType, item.correct)" style="color: red;"> (正确答案是：{{ item.correct }})</span> -->
          </div>
        </template>
        <div v-for="(items) in item.answerList" :key="items.id" style="pointer-events: none;">
          <el-checkbox v-model="items.istrue" :label="items.type+items.topic" size="large" />
        </div>
      </el-card>
    </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button  @click="dialogFormVisible = false">关闭</el-button>
          </span>
        </template>
      </el-dialog>
  </div>
</template>
<script setup lang="ts">
 import { ref, getCurrentInstance } from 'vue'
 import { researchId, cliCAudit, uncommit, nopass, papergetAll, listpaper  } from "@/api/research";
 import { useRoute } from "vue-router";
import data from './data'
const { proxy } = getCurrentInstance();
let proxys: any = proxy;
const route: any = useRoute();
 const { bill, datas } = data
const handleQuery = function():void {}
const changeFun = function(e:any):void {
  console.log(e)
}
let urls = ref('')
let srcLists = ref([])
route.query.id &&
  researchId(route.query.id).then((res) => {
    res.data.status = "" + res.data.status;
    res.data.type = "" + res.data.type;
    datas.value = res.data;
    let imgurl = datas.value.photoList && datas.value.photoList.filter(item => item.type == 0)[0]?.url
    urls.value = imgurl
    srcLists.value = [imgurl]
    if (datas.value.researchObject != 1) {
      bill.value.forEach((val) => {
        if (val.model == 'patientAge' || val.model == 'patientCity') {
          val.isShow = false
        }
      })
    } else {
      bill.value.forEach((val) => {
        if (val.model == 'patientAge' || val.model == 'patientCity') {
          val.isShow = true
        }
      })
    }
    if (datas.value.competeDrugName) {
      bill.value.forEach((val) => {
        if (val.model == 'competeDrugName' || val.model == 'competeFactory') {
          val.isShow = true
        }
      })
    } else {
      bill.value.forEach((val) => {
        if (val.model == 'competeDrugName' || val.model == 'competeFactory') {
          val.isShow = false
        }
      })
    }
  });
  const Cancel = () => {
    datas.value = {};
    const obj = { path: "/research/researchList" };
    proxys.$tab.closeOpenPage(obj);
  };
const cliRefuseFun = () => {
  if (datas.value.status < 2) {
    proxys.$modal.msgWarning('已提交的任务才能驳回')
    return
  }
  let fun: any = proxy.$refs.cliRefuseRef;
  fun.show();
};
const cliCAuditFun = () => {
  if (datas.value.status != 8) {
    proxys.$modal.msgWarning('代理商同意的任务才能同意')
    return
  }
  cliCAudit({
    id: route.query.id,
  }).then((res: any) => {
    if (res.status == 0) {
      proxys.$modal.msgSuccess("已同意");
    } else {
      proxys.$modal.msgError(res.msg);
    }

    researchId(route.query.id).then((res) => {
    res.data.status = "" + res.data.status;
    res.data.type = "" + res.data.type;
    datas.value = res.data;
  });
  });
};
const updateData = () => {
  researchId(route.query.id).then((res) => {
    res.data.status = "" + res.data.status;
    res.data.type = "" + res.data.type;
    datas.value = res.data;
  });
}
const publicScoreFun = () => {
  let fun: any = proxy.$refs.publicScoreRef;
  fun.show();
}

const commitFun = () => {
  if (datas.value.status != 7) {
    proxys.$modal.msgWarning('申请驳回的任务才能同意驳回')
    return
  }
  uncommit({
    id: route.query.id
  }).then((res) => {
    proxys.$modal.msgSuccess('已同意驳回')
    researchId(route.query.id).then((res) => {
      res.data.status = "" + res.data.status;
      res.data.type = "" + res.data.type;
      datas.value = res.data;
    });
  })
}

const nopassFun = () => {
  if (datas.value.status != 2) {
    proxys.$modal.msgWarning('已提交的任务才能不通过')
    return
  }
  nopass({
    id: route.query.id
  }).then((res) => {
    proxys.$modal.msgSuccess('不通过成功')
    researchId(route.query.id).then((res) => {
      res.data.status = "" + res.data.status;
      res.data.type = "" + res.data.type;
      datas.value = res.data;
    });
  })
}


const dialogFormVisible = ref(false)

const topicList = ref([])
const titleName = ref('')
const quertionFun = () => {
  papergetAll(route.query.examinationId).then((res) => {
    // console.log('fasdf242135', res)
    // this.id = res.data.id
    titleName.value = res.data.name
    topicList.value = res.data.topicList
    listpaperFun()
    
  })
}

const listpaperFun = () => {
  listpaper({
      id: route.query.id,
      paperId: route.query.examinationId
    }).then((res:any) => {
      // topicList.value.forEach((val, index) => {
      //   if (val.type == 0) {
      //     val.modexz = res.rows[index].answerType
      //   } else {
      //     val.modexz = res.rows[index].answerType.split(',')
      //   }
      // })
      console.log('afsdg2343251', topicList.value)
      topicList.value.forEach((val, index) => {
        val.answerList.forEach((vals) => {
          if (res.rows[index].answerType.includes(vals.type)) {
            vals.istrue = true
          } else {
            vals.istrue = false
          }
        })
      })
      
      dialogFormVisible.value = true
    })
  }
</script>
<style scoped lang="scss">
.pad_10 {
  padding: 10px;
  display: flex;
  height: calc(100vh - 100px);
  flex-direction: column;
  overflow: hidden;
}
.form_box_flex {
  flex: 1;
  overflow: hidden;
  overflow-y: auto;
}
.pad_10  .el-form--inline .el-form-item {
  margin: 0;
}
.el-divider--horizontal {
  margin: 10px 0;
}
:deep(.el-card) {
  height: 100%;
}
.color_b {
  margin: 20px 0;
  color: rgba(73,173,251,1);
  cursor: pointer;
}
.sty_top {
  margin: 20px;
}
.bg_g {
  display: inline-block;
  padding:0 5px;
  box-sizing: border-box;
  background-color: rgb(143, 211, 134);
  color: #fff;
  border-radius: 50px;
  margin-right: 10px;
}
.img_flex {
  display: flex;
  flex-direction: column;
  img {
    width: 200px;
    height: 150px;
    margin-top: 10px;
  }
}
.img_flex_c {
  display: flex;
}
</style>